html-01 基础知识
一、注释方法
html 表示超文本标记语言，结构 用来注释
css 表示层叠样式表，样式 用</* */>注释
js 表示脚本语言，行为动作 单行用//注释，多行用</* */>
二、介绍
html语言，用标记标签来描述网页的。
标签成对出现的，单标签的叫空标签或自闭合标签。
自闭合标签：<br>、<hr>、<input>、<img>、<meta>、<link>
三、常用浏览器及内核
谷歌 ---webkit blink
火狐 ---gecko
safari ---webkit
opera ---开始webkit 后来blink
ie ---trident
五、标签
h1-h6 六级标签，数字越大文字越小。p代表段落
h1每个页面最好只用一次，h2-h6可以随便用。
br 强制换行，是自闭合标签(空标签)。
六、页面的基本结构
<!DOCTYPE html>声明文档，告诉浏览器的解析器用哪种规范来解析文档
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> // 文档使用的编码格式
<title>Document</title>
</head>
<body>
</body>
</html>
- meta标签里面包含了页面的元信息（关键字，描述），页面的编码格式（字符编码，字符集），
- 常用的编码格式有:gb2312(国际2312),gbk(国标扩),UTF-8。
- body标签里面是页面的主体
七、标签分类
块标签
单独占用一行，可以设置所有的样式
常用的块标签有：h1-h6,p,div,ul,li,ol,dl,dt,dd
块标签里面可以包含其他的块标签，内联标签，内联块都行
但是p标签里面不能包含块标签
内联标签(行内标签) 在同一行显示，显示不完换行，不可以设置所有样式(比如宽度高度);
常用的内联标签有：strong,b,em,i,span,a
内联标签的margin值和padding值只能只能设置左右，不能设置上下。
内联标签里面不可以包含块标签，但是a标签可以放。
内联元素出现空格如何解决：
删除回车。（不提倡，不直观）。
给父元素设置font-size:0；给子元素设置font-size恢复子元素的字体。
内联块标签(行内块标签) 在同一行显示，显示不完换行，可以设置所有属性，可以设置宽高。
常用的内联块标签有：img
给img标签的父元素设置font-size:0;可以解决图片间隙
八、CSS
- 在head标签里面写style标签
- 语法：选择器
<style>
div {
color: red;
}
</style>
- 属性名和属性值中间用冒号隔开。
九、div和span标签
- div标签 ：没有任何语义,可以把他看做一个盒子,一个块,或者一部分,块标签。
- span标签：没有任何语义,内联标签。
十、无序列表。
- ul标签和li标签配合使用，ul标签只能放li标签，li标签可以放其他标签。
- 每个li前面都有个默认的实心圆，想改变默认的小圆点可以在li标签里面设置 type="circle" 空心圆（了解）
type="square" 方块
想取消默认的点:需要设置CSS属性：list-style:none;
ul和li都是块标签。
十一、有序列表
ol标签和li标签配合使用，每个li前面都有默认的序号，改变需要在ol标签设置
type="a" //小写a顺序排序
type="A" //大写A顺序排序
type="I" //罗马数字顺序排列
type="i" //罗马数字顺序小写排列
取消默认设置CSS属性：list-style:none;
倒序显示：reversed，从3开始倒序，start="3"；
ol和li都是块标签
li的父元素必须是ul或ol。
十二、定义列表
dl,dt,dd配合使用，dl是dt和dd的父元素，dt,dd是兄弟元素
dl的直接子元素只能是dt,dd，dt和dd里面可以包含其他元素
dd是对dt的解释和说明
dl,dt,dd都是块元素
十三、文字加粗，偏斜
- strong,b都可以让文字加粗，其中strong标签更具有强调的意义。
- em,i都可以让文字倾斜，其中em更具有强调的意义。
十四、图片标签
1.img标签，自闭合标签(空标签)； src="图片路劲"；
alt="图片的描述文字"； 当图片加载不出来的时候会显示这段文字。
title="图片的标题"；鼠标放上去显示这段文字。（所有的标签都可以有title属性）
srcset='图片地址 2x' 2x和3x根据密度区分图片，800w根据宽度适应图片；也可以写dpi，css可以写背景图时用image-set属性名；
width="500",height="500"；
十五、路径
绝对路径；（完整路径） （1）从盘符开始的
（2）从具体链接http开始的
相对路径；（文件夹下的路径） （1）在同一个目录下直接写文件名字(包含扩展名)，或者写./文件名字；
（2）当被链接的文件在当前文件的下一级文件夹里，写文件夹的名字/被链接的文件名字。
（3）当被链接的文件在当前文件的上一级，用../上一级链接的文件
十六、语义化
语义化是什么：用合理的html标签和特有的属性来格式化文档的内容。
语义化的有什么好处：
- 在没有css的情况下，页面还能呈现很好的页面结构。
- 提高代码的可读性，便于后期维护。
- 提高用户的体验，比如：给img标签设置title alt。
- 对seo有帮助。（seo是搜索引擎优化）。
面试题
● 简述<!doctype>的作用？
● 常见的浏览器及其内核？
● 常见的块级标签和行内标签分别有哪些？
● b和strong（i和em）标签的区别？
● 谈谈对语义化的理解？